<template>
  <div class="complex">
    <div class="complex-main">
      <complex-chart ref="plex"></complex-chart>
    </div>
  </div>
</template>
<script lang="ts">
import { Vue, Component, Ref } from "vue-property-decorator";
import ComplexChart from "@/components/ComplexChart/index.vue";
@Component({
  name: "Complex",
  components: { ComplexChart }
})
export default class Complex extends Vue {
  @Ref("plex")
  private plex!: ComplexChart;

  createData(start: number, end: number, step: number, max: number = 90) {
    const data: Array<{ depth: number; value: number }> = [];
    for (let i = start; i < end; i = i + step) {
      data.push({
        depth: i,
        value: Math.floor(Math.random() * max)
      });
    }
    return data;
  }

  mounted() {
    this.plex.setOptions({
      height: 600,
      range: [1000, 3300],
      ticks: {
        visible: true,
        formatStep: 200
      },
      columns: [
        {
          type: "scale",
          width: 70,
          headerLabel: "深度(m)"
        },
        {
          type: "label",
          width: 100,
          headerLabel: "地层",
          fontColor: "#FFF",
          fontWeight: "bold",
          fontSize: 14,
          onClick: (data: ComplexLabelItem) => {
            console.log(data);
            alert(data.label);
          },
          data: [
            {
              range: [1200, 1500],
              label: "造成岩石阶段A期",
              backgroundColor: "orange",
              fontColor: "#000",
              backgroundImage:
                "https://t11.baidu.com/it/u=953109097,1742167856&fm=58"
            },
            {
              range: [1500, 2000],
              label: "造成岩石阶段AC期",
              backgroundColor: "blue"
            },
            {
              range: [2000, 3000],
              label: "造成岩石阶段B期",
              backgroundColor: "green",
              backgroundImage:
                "https://t11.baidu.com/it/u=953109097,1742167856&fm=58"
            }
          ]
        },
        {
          type: "count",
          width: 150,
          children: [
            {
              type: "line",
              xRange: [0, 100],
              color: "blue",
              data: this.createData(1100, 3300, 100),
              headerLabel: "SP",
              headerFontSize: 14,
              headerFontWeight: "bold",
              headerFountColor: "blue"
            },
            {
              type: "line",
              xRange: [0, 50],
              color: "green",
              data: this.createData(1100, 3300, 100, 30),
              headerLabel: "SP",
              headerFontSize: 14,
              headerFontWeight: "bold",
              headerFountColor: "blue"
            }
          ]
        },
        {
          type: "count",
          width: 100,
          children: [
            {
              type: "area",
              xRange: [0, 100],
              color: "red",
              data: this.createData(1100, 3300, 100),
              headerLabel: "SP",
              headerFontSize: 14,
              headerFontWeight: "bold",
              headerFountColor: "blue"
            }
          ]
        },
        {
          type: "count",
          width: 100,
          children: [
            {
              type: "bar",
              xRange: [0, 100],
              color: "purple",
              data: this.createData(1100, 3300, 100),
              headerLabel: "SP",
              headerFontSize: 14,
              headerFontWeight: "bold",
              headerFountColor: "purple"
            }
          ]
        },
        {
          type: "count",
          width: 100,
          children: [
            {
              type: "point",
              xRange: [0, 100],
              color: "blue",
              data: this.createData(1100, 3300, 100),
              headerLabel: "SP",
              headerFontSize: 14,
              headerFontWeight: "bold",
              headerFountColor: "blue",
              icon: {
                type: "five-star",
                fill: "red",
                stroke: "green"
              }
            }
          ]
        },
        {
          type: "group",
          headerLabel: "藻类",
          headerFontSize: 14,
          headerFontWeight: "bold",
          headerFountColor: "blue",
          children: [
            {
              type: "count",
              width: 100,
              children: [
                {
                  type: "line",
                  xRange: [0, 100],
                  color: "blue",
                  data: this.createData(1100, 3300, 100),
                  headerLabel: "SP",
                  headerFontSize: 14,
                  headerFontWeight: "bold",
                  headerFountColor: "blue"
                }
              ]
            },
            {
              type: "count",
              width: 100,
              children: [
                {
                  type: "area",
                  xRange: [0, 100],
                  color: "blue",
                  data: this.createData(1100, 3300, 100),
                  headerLabel: "SP",
                  headerFontSize: 14,
                  headerFontWeight: "bold",
                  headerFountColor: "blue"
                }
              ]
            },
            {
              type: "count",
              width: 100,
              children: [
                {
                  type: "bar",
                  xRange: [0, 100],
                  color: "skyblue",
                  data: this.createData(1100, 3300, 100),
                  headerLabel: "SP",
                  headerFontSize: 14,
                  headerFontWeight: "bold",
                  headerFountColor: "blue",
                  barWidth: 3
                }
              ]
            },
            {
              type: "count",
              width: 100,
              children: [
                {
                  type: "point",
                  xRange: [0, 100],
                  color: "blue",
                  data: this.createData(1100, 3300, 100),
                  headerLabel: "SP",
                  headerFontSize: 14,
                  headerFontWeight: "bold",
                  headerFountColor: "blue",
                  icon: {
                    type: "circle"
                  }
                }
              ]
            }
          ]
        },
        {
          type: "label",
          width: 100,
          headerLabel: "地层",
          fontColor: "#000",
          fontWeight: "bold",
          fontSize: 14,
          data: [
            {
              range: [1000, 3300],
              label: "造成岩石阶段B期",
              backgroundColor: "#fff"
            }
          ]
        }
      ]
    });
  }
}
</script>
<style lang="scss" scoped>
.complex {
  padding-left: 20px;
  padding-top: 20px;
  .complex-main {
    width: 1600px;
  }
}
</style>
